<template>
  <div v-loading="loading" class="app-container">
    <div class="head-container">
      <searchForm ref="searchForm" :parent="currentObject" />
    </div>
    <div>
      <div style="padding-top:5px;">
        <downloadBnt ref="downloadBnt" :parent="currentObject" />
        <el-button type="danger" size="mini" style="float:right;margin-bottom:5px;" icon="el-icon-circle-close" round @click="batchReject">驳回</el-button>
        <el-button type="success" size="mini" style="float:right;margin-left:0px;margin-bottom:5px;" icon="el-icon-circle-check" round @click="batchAgree">同意</el-button>
        <el-button type="primary" size="mini" style="float:right;margin-bottom:5px;" icon="el-icon-edit" round @click="doClearSelection">取消选择</el-button>
      </div>
      <div>
        <el-table
          ref="itemTab"
          :data="data"
          :row-key="getRowKeys"
          stripe
          size="small"
          border
          style="width: 100%;"
          round
          @sort-change="sortChange"
          @selection-change="handleSelectionChange"
          @header-dragend="colChange"
        >
          <el-table-column :reserve-selection="true" type="selection" align="center" width="55" />
          <el-table-column :show-overflow-tooltip="true" sortable="custom" label="流水号" prop="vendorPortalId" :width="colWidths.vendorPortalId" />
          <el-table-column :show-overflow-tooltip="true" label="商品号" prop="itemNbr" :width="colWidths.itemNbr">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="toItemInfo(scope.row)">{{ getValue(scope.row,'itemNbr') }}</el-button>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="部门" prop="deptNbr" :width="colWidths.deptNbr">
            <template slot-scope="scope">{{ getValue(scope.row,'deptNbr') }}</template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="商品说明1" prop="item1Desc" :width="colWidths.item1Desc">
            <template slot-scope="scope">{{ getValue(scope.row,'item1Desc') }}</template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="供应商之商品代码" prop="vendorStockId" :width="colWidths.vendorStockId">
            <template slot-scope="scope">{{ getValue(scope.row,'vendorStockId') }}</template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="供应商编号" prop="vendorNbr" :width="colWidths.vendorNbr">
            <template slot-scope="scope">{{ getValue(scope.row,'vendorNbr') }}</template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="供应商名称" prop="vendorName" :width="colWidths.vendorName">
            <template slot-scope="scope">{{ getValue(scope.row,'vendorName') }}</template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="单品未税成本" prop="vnpkCostAmtVnpkQty" :width="colWidths.vnpkCostAmtVnpkQty">
            <template slot-scope="scope">{{ getValue(scope.row,'vnpkCostAmtVnpkQty') }}</template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="进项税" prop="vatIn" :width="colWidths.vatIn">
            <template slot-scope="scope">{{ getValue(scope.row,'vatIn') }}</template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" sortable="custom" label="最近更新时间" prop="updatedTime" :width="colWidths.updatedTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updatedTime) }}</span>
            </template>
          </el-table-column>
          <itemStatusForm />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="warning" @click="toItemInfo(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
          :total="total"
          :current-page.sync="currentPage"
          :page-sizes="[10,50,100,500]"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
    </div>
    <auditActiveForm ref="auditActiveForm" :parent="currentObject" />
  </div>
</template>

<script>
import auditActiveForm from '@/views/active-item/first-audit/audit-active'
import searchForm from '@/views/active-item/search-form'
import initData from '@/utils/initData'
import { parseTime } from '@/utils/index'
import { Message } from 'element-ui'
import { batchActiveItemAgree, batchActiveItemReject } from '@/api/active-item'
import common from '@/api/active-global'
import itemStatusForm from '@/views/part/itemStatus'
import downloadBnt from '@/views/active-item/file/download'

export default {
  components: { itemStatusForm, auditActiveForm, searchForm, downloadBnt },
  mixins: [initData],
  data() {
    return {
      currentObject: this,
      ids: [],
      loading: false,
      itemStatuses: [
        { value: 0, name: '供应商撤回' },
        { value: 1, name: '供应商提交待审' },
        { value: -2, name: '已驳回至供应商' },
        { value: 14, name: '供应商处理中' }
      ],
      changeType: common.itemStatus
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    parseTime,
    getValue(row, key) { // 获取信息
      if (row === undefined || row === null || key === undefined || key === null || key === '') {
        return ''
      }
      if (row.itemInfo === undefined || row.itemInfo === null) {
        return ''
      }
      var item = JSON.parse(row.itemInfo)
      if (item === null) {
        return ''
      }
      return item[key]
    },
    beforeInit() {
      this.url = common.basePath + '/queryFirstAuditActiveItemList'
      this.params.pageNum = this.page
      this.params.pageSize = this.size
      return true
    },
    // 详情触发
    toItemInfo(item) {
      const _this = this.$refs.auditActiveForm
      _this.title = '商品激活-详情页面'
      _this.itemInfo = JSON.parse(item.itemInfo)
      _this.itemInfo.vendorItemInfo = JSON.parse(item.vendorItemInfo)
      _this.itemStatus = item.itemStatus
      _this.buyerId = item.buyerId
      _this.id = item.id
      _this.dialog = true
    },
    // 批量同意
    batchAgree() {
      if (this.ids.length < 1) {
        Message({
          message: '请选择需要审核的item。',
          type: 'error',
          duration: 3 * 1000
        })
      } else {
        this.$confirm('确认同意选择的 ' + this.ids.length + ' 条item信息?', '批量同意确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          batchActiveItemAgree({ ids: this.ids }).then(res => {
            this.toQuery()
            const successMsg = this.ids.length > 10 ? '处理中，请稍后刷新页面进行查询。' : '批量同意完成。'
            Message({
              message: successMsg,
              type: 'success',
              duration: 3 * 1000
            })
            this.loading = false
          }, error => {
            console.log(error)
            this.loading = false
          })
        })
      }
    },
    // 批量审核驳回
    batchReject() {
      if (this.ids.length < 1) {
        Message({
          message: '请选择需要审核的item。',
          type: 'error',
          duration: 3 * 1000
        })
      } else {
        this.$prompt('请输入驳回原因', '驳回 ' + this.ids.length + ' 条Item', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValidator: this.rejectRemarkValidator,
          type: 'warning'
        }).then((rejectRemark) => {
          batchActiveItemReject(this.ids, this.changeType, rejectRemark.value).then(res => {
            this.init()
            Message({
              message: '审核完成。',
              type: 'success',
              duration: 3 * 1000
            })
          })
        })
      }
    },
    rejectRemarkValidator(val) {
      if (!val) {
        return '请填写驳回原因'
      } else if (val.length > 500) {
        return '驳回原因长度为1-500'
      }
      return true
    },
    // 列表排序触发
    sortChange(val) {
      let sortType = ''
      if (val.order === 'descending') {
        sortType = ' DESC'
      } else if (val.order === 'ascending') {
        sortType = ' ASC'
      }
      this.params.sort = val.prop + sortType
      this.init()
    },
    // 查询
    toQuery() {
      this.page = 0
      this.currentPage = 1
      this.init()
      this.doClearSelection()
    },
    // 列表多选框触发
    handleSelectionChange(val) {
      this.ids = []
      val.forEach(item => {
        this.ids.push(item.id)
      })
    },
    // 翻页选择row的key值
    getRowKeys(row) {
      return row.id
    },
    // 清空选择项
    doClearSelection() {
      this.$refs.itemTab.clearSelection()
    }
  }
}
</script>
